<template>
  <div class="app-container">
      <div class="ci">
          <div class="item">
            <span class="name">订单编号</span>
            <span class="value">
               {{orderInfo.orderNum}}
            </span>
          </div>
          <div class="item">
            <span class="name">用户信息</span>
            <span class="value">
                <div class="portrait">
                    <el-image style="width: 40px; height: 40px;border-radius:50%" :src="orderInfo.headPortrait" :preview-src-list="[orderInfo.headPortrait]"></el-image>
                </div>
                <div class="info">
                      {{orderInfo.nickName}} , {{orderInfo.phone}}
                </div>  
            </span>
          </div>
          <div class="item h100">
            <span class="name">课程</span>
            <span class="value pics">
                <bx-image :src="courseInfo.imageConvert" :width="60" :height="60" :show-delete="false" ></bx-image>
                <div>{{courseInfo.name}}</div>
            </span>
          </div>
          <div class="item">
            <span class="name">课程信息</span>
            <span class="value">
               {{courseInfo.timeInterval}}-{{courseInfo.classZhi}}
            </span>
          </div>
          <div class="item">
            <span class="name">订单名称</span>
            <span class="value">
               {{orderInfo.name}}
            </span>
          </div>
          <div class="item">
            <span class="name">订单类型</span>
            <span class="value">
               {{orderInfo.orderType | parseOrderType}}
            </span>
          </div>
          <div class="item">
            <span class="name">订单金额</span>
            <span class="value">
              {{orderInfo.money }}
            </span>
          </div>
          <div class="item">
            <span class="name">下单时间</span>
            <span class="value">
              {{orderInfo.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}
            </span>
          </div>
          <div class="item">
            <span class="name">付款方式</span>
            <span class="value">
              {{orderInfo.payType | parsePayType }}
            </span>
          </div>
          <div class="item">
            <span class="name">付款时间</span>
            <span class="value">
              {{orderInfo.okTime | parseTime('{y}-{m}-{d} {h}:{i}') }}
            </span>
          </div>
          <div class="item">
            <span class="name">订单状态</span>
            <span class="value">
                <div>{{orderInfo.tradeState | parseTradeState}}</div>
            </span>
          </div>
          <div class="item">
            <span class="name">操作</span>
            <span class="value">
                <div>
                  <el-popconfirm title="确定要完成订单付款吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="payOrder()" >
                    <el-button  slot="reference" type="primary" :loading="btnpayloading"  style="margin-left:10px;">付款成功</el-button>
                  </el-popconfirm>
                </div>
            </span>
          </div>
          <!--- end -->
      </div>
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as shopApi from '@/api/shop'
import * as orderApi from '@/api/orders'
import * as courseApi from '@/api/courseinfo'
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'


const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  name:'OrdersDetailShop',
  components: {
    BxImage
  },
  data() {
    return {
      btnpayloading:false,
      orderInfo:{
        id:guid.empty,
        name:'',
        orderNum:'',
        userInfo:'',
        createTime:'',
        okTime:'',
        tradeState:'',
        isClosed:'',
        orderType:'',
        headPortrtait:'',
        nickName:'',
        phone:'',
        money:'',
      },
      courseInfo:{
          id:'',
          name:'',
          image:'',
          imageConvert:'',
          timeInterval:'',
          classZhi:'',
      },
    }
  },
  computed: {
    
  },
  filters:{
    parseTradeState(state){
      return enumHelper.order.tradeState.getName(state);
    },
    parsePayType(state){
      return enumHelper.order.payType.getName(state);
    },
    parseOrderType(state){
      return enumHelper.order.orderType.getName(state);
    },
  },
  created() {
    
    this.init();
  },
  methods: {
    init(){
var that=this;
    const id = that.$route.params && that.$route.params.id
    if(id && id!='0'){
      orderApi.getOrderInfo({id:id}).then(res=>{
         if(res.data){
            that.orderInfo.id=res.data.id;
             that.orderInfo.name=res.data.name;
             that.orderInfo.orderNum=res.data.orderNum || '';
             that.orderInfo.userInfo='';
             that.orderInfo.createTime=res.data.createTime;
             that.orderInfo.okTime=res.data.okTime ;
             that.orderInfo.orderType=res.data.orderType;
             that.orderInfo.payType=res.data.payType;
             that.orderInfo.phone=res.data.phone;
             that.orderInfo.nickName=res.data.nickName;
             that.orderInfo.headPortrait=res.data.headPortrait;
             that.orderInfo.tradeState=res.data.tradeState;
             that.orderInfo.money=(res.data.money/100).toFixed(2);

             courseApi.getCourseInfo({id:res.data.keCourseId}).then(cres=>{
                that.courseInfo.name=cres.data.name;
                that.courseInfo.timeInterval=cres.data.timeInterval || '';
                that.courseInfo.classZhi=cres.data.classZhi || '';
                that.courseInfo.image=cres.data.image;
                that.courseInfo.imageConvert=imageHelper.GetFullUrl(cres.data.image,700,700);
                
             });
         }
      });
    } 
    },
    payOrder(){
      var that=this;
      that.btnpayloading=true;
      orderApi.PayOrderTest({id:this.orderInfo.id}).then(res=>{
        if(res.data){
            that.init();
            that.$message({
              message:'支付成功',
              type:'success'
            })
            that.btnpayloading=false;
        }
      }).catch(()=>{
        that.btnpayloading=false;
      })
    }
  }
}
</script>

